import CommonModal from '@/components/CommonModal';
import ReactJsonView from '@/components/ReactJsonView';
import { EditForm } from '@/page-components/index';
import { Button, Form, Input, Select, Space, Table, Typography } from 'antd';
import { forwardRef, useImperativeHandle, useRef } from 'react';
const TestModal = forwardRef((props: any, ref) => {
  const modalRef = useRef<any>();
  const [form] = Form.useForm();
  const remove = (index: number) => {
    const list = form.getFieldValue('names');
    list.splice(index, 1);
    form.setFieldsValue({
      names: list,
    });
  };

  useImperativeHandle(ref, () => ({
    show: () => {
      modalRef?.current?.show();
    },
    close: () => {
      modalRef?.current?.close();
    },
    getFormValue: () => {
      return form.getFieldsValue();
    },
  }));
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      render: (text: any, field: any) => {
        return (
          <Form.Item
            {...field}
            validateTrigger={['onChange', 'onBlur']}
            noStyle
            name={[field?.name, 'name']}
            key={field?.key}
          >
            <Input
              value={'默认值'}
              //   style={{
              //     width: '100%',
              //     border: 'none',
              //     background: 'none',
              //     color: '',
              //   }}
              //   disabled
            />
          </Form.Item>
        );
      },
    },
    {
      title: '年龄',
      dataIndex: 'age',
      render: (text: any, field: any) => {
        return (
          <Form.Item
            {...field}
            validateTrigger={['onChange', 'onBlur']}
            rules={[
              {
                required: true,
                message: "Please input passenger's name or delete this field.",
              },
            ]}
            noStyle
            name={[field?.name, 'age']}
            key={field?.key}
          >
            <Input placeholder="passenger name" style={{ width: '100%' }} />
          </Form.Item>
        );
      },
    },
    {
      title: '身高',
      dataIndex: 'height',
      render: (text: any, field: any) => {
        return (
          <Form.Item
            {...field}
            validateTrigger={['onChange', 'onBlur']}
            rules={[
              {
                required: true,
                message: "Please input passenger's name or delete this field.",
              },
            ]}
            noStyle
            name={[field?.name, 'height']}
            key={field?.key}
          >
            <Input placeholder="passenger name" style={{ width: '100%' }} />
          </Form.Item>
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'age',
      render: (text: any, field: any, index: any) => {
        return (
          <Button onClick={() => remove(index)}  type="primary">
            移除
          </Button>
        );
      },
    },
  ];

  return (
    <CommonModal
      title="测试"
      //   width={800}
      onOk={async () => {
        await form.validateFields();
        // console.log(props);

        props?.onSubmit(form.getFieldsValue());
        form.resetFields();
        modalRef?.current?.close();
      }}
      onCancel={() => {
        form.resetFields();
        modalRef?.current?.close();
      }}
      ref={modalRef}
    >
      <EditForm
        form={form}
        oneColumn
        scrollToFirstError
        initialValues={{
          test: '初始数据',
        }}
      >
        <Form.Item
          label="测试"
          name="test"
          rules={[{ required: true, message: '请输入' }]}
          hasFeedback
        >
          <Input
            placeholder="请输入"
            style={{ width: '100%', borderRadius: 0 }}
          />
        </Form.Item>
        <Form.Item
          label="是否通过"
          name="isPass"
          rules={[{ required: true, message: '请输入' }]}
        >
          <Select
            options={[
              {
                label: '通过',
                value: '1',
              },
              {
                label: '不通过',
                value: '2',
              },
            ]}
            placeholder="请输入"
            style={{ width: '100%' }}
          />
        </Form.Item>
        在表单字段的校验规则中，如果设置了
        shouldUpdate，则表单字段的值将始终被校验。
        每次表单数据更新时都会触发shouldUpdate的校验
        <Form.Item shouldUpdate noStyle>
          {({ getFieldValue }) => {
            const isPass = getFieldValue('isPass');
            if (isPass === '2') {
              return (
                <Form.Item
                  label="驳回原因"
                  name="reasons"
                  rules={[{ required: true, message: '请输入' }]}
                  preserve={false}
                >
                  <Input placeholder="请输入" />
                </Form.Item>
              );
            } else {
              //   setFieldsValue({
              //     reasons: '',
              //   });
              return null;
            }
          }}
        </Form.Item>
        只校验依赖字段的更新
        <Form.Item dependencies={['isPass']} noStyle>
          {({ getFieldValue }) => {
            const isPass = getFieldValue('isPass');
            if (isPass === '2') {
              return (
                <Form.Item
                  label="驳回人"
                  name="reasons"
                  rules={[{ required: true, message: '请输入' }]}
                  preserve={false}
                >
                  <Input placeholder="请输入" />
                </Form.Item>
              );
            } else {
              //   setFieldsValue({
              //     reasons: '',
              //   });
              return null;
            }
          }}
        </Form.Item>
        <Form.List name="names">
          {(fields, { add }, {}) => (
            <>
              <Table
                columns={columns}
                dataSource={fields}
                pagination={false}
                rowKey={'name'}
              ></Table>
              <Space style={{ marginTop: 20 }}>
                <Button
                  type="dashed"
                  onClick={() => {
                    add();
                  }}
                  block
                >
                  添加
                </Button>
              </Space>
            </>
          )}
        </Form.List>
        <Form.Item shouldUpdate noStyle>
          {() => {
            return (
              <>
                <ReactJsonView src={form.getFieldsValue()}></ReactJsonView>
                <Typography>
                  <pre style={{ height: '300px', overflow: 'scroll' }}>
                    {JSON.stringify(form.getFieldsValue(), null, 2)}
                  </pre>
                </Typography>
              </>
            );
          }}
        </Form.Item>
      </EditForm>
    </CommonModal>
  );
});

export default TestModal;
